$(function () {
    // 自定义校验密码
    layui.form.verify({
        pwd: [
            /^\S{6,12}$/,
            '密码为6-12位的非空字符串'
        ],
        rePwd: function (value) {
            var newPwd = $('[name=password]').val();
            if (value !== newPwd) {
                return '两次密码必须一致';
            }
        }
    })

    // 准备一个参数
    var q = {
        pagenum: 1,
        pagesize: 4
    }

    /* 效果1、渲染用户列表信息到页面 */
    getUserList();

    function getUserList() {
        $.ajax({
            method: 'get',
            url: '/admin/users',
            data: q,
            success(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, { icon: 5 });
                }
                // console.log(res);
                // 模板引擎渲染数据到页面
                // 调用template函数
                var htmlStr = template('tpl-user', res);
                // console.log(htmlStr);
                $('tbody').html(htmlStr);

                // 渲染分页页码
                renderPage(res.total);
            }
        })
    }

    // 渲染页码函数
    function renderPage(total) {
        layui.laypage.render({
            elem: 'articlePage',  //装页码按钮容器的id
            count: total,
            limit: q.pagesize,  //每页显示的条数
            curr: q.pagenum, //当前获取的是第几页的数据
            layout: ['page', 'next', 'prev', 'count', 'limit'],
            limits: [4, 6, 8, 10],
            /* 
                渲染页码时调用了jump函数，first的值为true，
                单击页码时调用了jump函数，first的值为undefined
            */
            jump: function (obj, first) {
                // console.log(obj);   //分页的配置项对象  curr和limit
                // 如果是渲染页码就调用jump函数，则不执行里面的代码
                if (first === true) {
                    return;
                }
                // 获取每页的条数，并设置给参数对象q
                q.pagesize = obj.limit;
                q.pagenum = obj.curr;
                // 重新获取文章数据
                getUserList();
            }
        })
    }

    /* 效果2、通过id删除用户列表信息 */
    $('tbody').on('click', '.delete', function () {
        // 获取id
        var id = $(this).attr('data-id');
        // console.log(id);
        layui.layer.confirm('确定要删除吗？', { icon: 3, title: '提示' }, function (index) {
            //do something
            $.ajax({
                method: 'DELETE',
                url: '/admin/users/' + id,
                success(res) {
                    if (res.status !== 0) {
                        return layui.layer.msg(res.message, { icon: 5 });
                    }
                    layui.layer.msg(res.message, { icon: 6 });

                    // 重新渲染页面数据
                    getUserList();
                }
            })
            layui.layer.close(index);
        });
    })

    /* 效果3、重置密码 */
    // 点击重置密码，弹出修改密码框
    var updatePwd = null;
    $('tbody').on('click', '.resetpwd', function () {
        updatePwd = layui.layer.open({
            type: 1,
            title: '编辑分类',
            area: ['500px', '300px'],
            content: $('#repwd-form-tpl').html()
        })
    })
    // 给repwd-form设置一个提交事件
    $('body').on('submit', 'form', function (e) {
        e.preventDefault();

        var id = $('.resetpwd').attr('data-id');
        console.log(id);
        // 接收数据
        var password = $('[name=password]').val();
        console.log(password);
        $.ajax({
            method: 'PUT',
            url: '/admin/users/' + id,
            data: {
                password
            },
            success(res) {
                // console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, { icon: 5 });
                }
                layui.layer.msg(res.message, { icon: 6 });
                layui.layer.close(updatePwd);
            }
        })

    })

    /* 效果4、给“编辑”按钮一个点击事件 */
    $('tbody').on('click', '#editBtn', function () {
        var id = $(this).attr('data-id');
        // console.log(id);
        localStorage.setItem('index', id);
    })
})